<template>
  <h1>El组件-开关</h1>
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <!-- 开关只支持布尔类型的值
  如果想要扩展为数字或字符串类型，需要设置active-value和inactive-value属性来控制 -->
  <el-switch v-model="value3" :active-value="1" :inactive-value="0"/>
  <el-switch v-model="value4" :active-value="'1'" :inactive-value="'0'"/>
  <el-switch v-model="value4" active-value="1" inactive-value="0"/>
</template>

<script setup>


import {ref} from "vue";

const value1 = ref(true)
const value2 = ref(true)
const value3 = ref(0)
const value4 = ref('0');
</script>

<style scoped>

</style>